import React, { useState, useEffect, useRef } from 'react'
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
import VideoPlayer from './components/VideoPlay';
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui'
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'
const RenderStyle = (props) => {
    const { data = {}, setPlayerSrc, linkGo } = props
    console.log(data, 'video')
    const { countType = 'swiper', list = [], VideoTitleFlag, radiusType, borderRadius } = data
    const imgBase = ''
    const imgTitle = (val = {}) => {
        const { title } = val
        if (!VideoTitleFlag) {
            return null
        }
        return <View className='img-title'>
            <View className='img-title-container'>{title}</View>
        </View>
    }

    if (list.length > 0) {
        if (countType === 'two') {
            return <View className='wxPage_video_1'> {
                list.map(item => {
                    const { cover, src } = item
                    return <View style={{ width: '45%' }}>
                        <View onClick={() => { setPlayerSrc(src) }} className='wxPage_displayDefauleAdvertising'>
                            <Image mode="aspectFill" style={{ width: '100%', height: "100%" }} src={cover}></Image>
                            {imgTitle(item)}
                            <View className='swiper_video_player'>
                                <AtIcon value='play' size='48' color='#999999'></AtIcon>
                            </View>
                        </View>
                    </View>
                })
            }  </View>
        } else if (countType === 'swiper') {
            return <Swiper className='video_swiper_box' circular={true} indicatorDots={true} autoplay={true}>
                {list.map((item, index) => {
                    const { src, cover } = item
                    return <SwiperItem key={index}>
                        <View onClick={() => { setPlayerSrc(src) }} style={{ position: 'relative' }} className='video_swiper_box'>
                            <Image mode="aspectFill" src={cover} style={{ width: '100%', height: "100%" }} />
                            {imgTitle(item)}
                            <View className='swiper_video_player'>
                                <AtIcon value='play' size='48' color='#999999'></AtIcon>
                            </View>
                        </View>
                    </SwiperItem>
                })
                }</Swiper>
        }
        else if (countType === 'scroll') {
            return <View className='topic-ad-slider smallImage_box'>
                {list.map(val => {
                    const { title, cover, src } = val
                    return <View onClick={() => { setPlayerSrc(src) }} className='wxPage_displayDefauleAdvertising slider-big-box'>
                        <Image mode="aspectFill" style={{ width: '100%', height: "100%" }} src={cover}></Image>
                        {imgTitle(val)}
                    </View>
                })}
            </View>

        }
        else return null
    }
    else {
        return null
    }
}
const DisplayAdvertising = (props) => {
    const { data = {}, videoKey } = props
    const { backgroundColor, title, titleShow, cycleFlag, moreShow, backgroundImage, top, bottom, paddingTop, paddingLeft, backgroundType } = data
    const [playerSrc, setPlayerSrc] = useState('')
    const [isFullScreen, setIsFullScreen] = useState(false);
    const videoRef = useRef(null);
    let videoContext = Taro.createVideoContext(videoKey)

    useEffect(() => {
        if (playerSrc) {
            toggleFullScreen()
        }
    }, [playerSrc])

    const toggleFullScreen = () => {
        console.log('我点击了')
        if (videoRef.current) {
            console.log(videoContext)
            setTimeout(() => {
                videoContext.requestFullScreen()
                videoContext.play()
                setIsFullScreen(true)
            }, 300)

        }

    };

    const renderBg = () => {
        if (backgroundType !== 'image') {
            return {
                background: backgroundColor
            }
        } else {
            return {
                ...backgroundObj(backgroundImage)
            }
        }
    }

    return <View style={{ padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, ...renderBg() }} className=''>
        <View>
            {titleShow && <View className='Video_box'>
                <View className='Video_title'>{title ? title : "视频"}</View>
                {moreShow && <View onClick={() => { linkGo(data) }} className='text-group'>查看更多{'>'}</View>}
            </View>}
            <RenderStyle setPlayerSrc={setPlayerSrc} {...props}></RenderStyle>
            <VideoPlayer setPlayerSrc={setPlayerSrc} setIsFullScreen={setIsFullScreen} videoContext={videoContext} videoKey={videoKey} loop={cycleFlag} isFullScreen={isFullScreen} videoRef={videoRef} src={playerSrc}></VideoPlayer>
        </View>
    </View>
}
export default DisplayAdvertising